<template>
	<uni-popup ref="popupRef" :is-mask-click="false" @change="popChange">
		<view class="w-[60vw] bg-white rounded-md overflow-hidden flex flex-col gap-2">
			<view class="center relative py-2">
				<view class="text-[24rpx]">{{ userScore ? '已评分过啦 ~' : '壁纸评分' }}</view>
				<view class="absolute h-full px-2 top-0 right-0 center" @click="() => popupRef.close()">
					<uni-icons type="closeempty" />
				</view>
			</view>
			<view class="px-2 center gap-2">
				<uni-rate v-model="rate" allowHalf :disabled="!!userScore" />
				<view class="w-[95rpx] text-yellow-500 text-right">{{ rate }} 分</view>
			</view>
			<view class="p-2 pb-4 center">
				<button size="mini" @click="setScore" :disabled="!rate || !!userScore">确定评分</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { computed, ref, watchEffect } from 'vue'
	import { useExpose } from '@/hooks'
	import { setupScore } from '@/api/home'

	const props = defineProps({
		info: { type: Object, default: () => ({}) }
	})
	const emit = defineEmits(['udpate'])
	const rate = ref(0)
	const popupRef = ref(props.info.userScore)

	const userScore = computed(() => (props.info.userScore ? Number(props.info.userScore) : null))

	function popChange({ show }) {
		if (show) {
			rate.value = userScore.value || 0
		}
	}

	async function setScore() {
		const params = {
			classid: props.info.classid,
			wallId: props.info._id,
			userScore: rate.value
		}
		const res = await setupScore(params)
		emit('udpate', rate.value)
		uni.showToast({ title: '评分成功', icon: 'success' })
		popupRef.value.close()
	}

	defineExpose(useExpose(popupRef))
</script>
